<template>
	<div>
		<div id="balance_header">
			<div class="fl">
				<p class="p30">签到积分</p>
				<p class="p36">{{moneyDatas.point1}}</p>
			</div>
			<div class="fr">
				<p class="p30">购物积分</p>
				<p class="p36">{{moneyDatas.point3}}</p>
			</div>
			<div class="fr">
				<p class="p30">提现积分</p>
				<p class="p36">{{moneyDatas.point2}}</p>
			</div>
		</div>
		<!-- 提现区 -->
		<div id="draw_money_container">
            <p class="p32">
				提示：
			</p>
            <p class="p32">1.每天提现一次，每次不小于10w积分（提现积分整除10w）,仅支持微信提现。</p>
            <p class="p32">2.积分比例：1000积分=1元人民币。</p>
			<div class="input-container">
				<input type="number" placeholder="请输入提现积分（100元的倍数）" v-model="drawPoint">
			</div>
			<div id="draw_money_bottom">
				<p class="p24 grey">一个工作日内到对应账户</p>
			</div>
			<div class="input-container">
				<ul>
					<li>
						<p>申请时间</p>
						<p>提现进度</p>
						<p>提现积分</p>
						<p>提现金额</p>
					</li>
					<li v-for="i in list">
						<p>{{utcToDate(i.created_at)}}</p>
						<p>{{i.status | typeFilter}}</p>
						<p>{{i.point}}</p>
						<p>￥{{i.cash}}</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="btn" :class="{'btnActive':drawPoint>0&&moneyDatas.point2>drawPoint&&(drawPoint%100000)===0}" @click="clickDrawMoney">提取</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { utcToDate } from '@/assets/js/utils.js'
export default{
	data(){
		return{
			moneyDatas:{},
			drawPoint:0,
			urlApi:"http://we.hzchuangxiangzhe.cn/wukong/php/PcApi",
			list:[],
		}
	},
	created(){
		this.drawHistory();
		this.getPoint();
	},
	methods:{
		utcToDate(timestamp) {//时间格式化
			return utcToDate(timestamp)
		},
		getPoint(){//获取积分
			this.$http.post(this.urlApi,{name:'shopping.sys.mypoint2'},{emulateJSON:true}).then((res)=>{
				if(res.body.code===1000){
				this.moneyDatas = res.body.data;
				}else{
					console.log(res.body.msg);
				}
			},(err)=>{
				console.log(err);
			})
		},
		drawHistory(){//提现记录
			// this.$http.post('/api',{name:'shopping.sys.withdrawHistory'},{emulateJSON:true}).then((res)=>{
			this.$http.post(this.urlApi,{name:'shopping.sys.withdrawHistory'},{emulateJSON:true}).then((res)=>{
				if(res.body.code===1000){
				this.list = res.body.data;
				}else{
					console.log(res.body.msg);
				}
			},(err)=>{
				console.log(err);
			})
		},
		clickDrawMoney(){//提现
			// this.$http.post('/api',{name:'shopping.sys.Virtual.withdraw',point:this.drawPoint},{emulateJSON:true}).then((res)=>{
			this.$http.post(this.urlApi,{name:'shopping.sys.Virtual.withdraw',point:this.drawPoint},{emulateJSON:true}).then((res)=>{
				if(res.body.code===1000){
					console.log(res);
					this.getPoint();
					this.drawHistory();
					alert('提现申请成功');
				}else{
					alert(res.body.msg);
				}
			},(err)=>{
				console.log(err);
			})
		}
	},
	filters:{
		typeFilter(value){
			let val;
			switch(value){
				case '1':
				val = '申请中'
				break;
				case '2':
				val = '提现中'
				break;
				case '3':
				val = '拒绝'
				break;
				case '4':
				val = '提现完成'
				break;
			}
			return val;
		}
	}
}
</script>
<style lang='less' scoped>
	#balance_header{
		background: linear-gradient(0deg, #fb4a4a 0%, #fb794a 99%);
		padding: .8rem 1rem;
		line-height: .8rem;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		text-align: center;
		color: #fff;

	}
	#draw_money_container{
		background: #fff;
		padding: .3rem .3rem 0;
		.p32{
			font-size: .4rem;
			margin-bottom:.2rem;
			color:#FB5A4A;
		}
		ul li{
			display: flex;
			justify-content: space-between;
			font-size: .34rem;
			padding: .2rem;
			box-sizing: border-box;
			p{
				text-align:center;
				width:28%;
			}
		}
	}
	.input-container{
		padding: .2rem 0;
		border-bottom: 1px solid #dcdcdc;
		font-size: .3rem;
   		color: #333;
		input{
			padding:.1rem .2rem;
			display: inline-block;
			width: 7rem;
			font-size: .46rem;
			border:.01rem solid gray;
			border-radius: .08rem;
		}
	}
	#draw_money_bottom{
		text-align: right;
		line-height: .7rem;
		padding: .2rem 0;
	}
	.btn{
		position: fixed;
		margin: 2rem auto;
		left: .4rem;
		bottom: .21rem;
		border-radius: 0.16rem;
		width: 9.2rem;
		height: 1.17rem;
		line-height: 1.17rem;
		text-align: center;
		font-size: 0.45rem;
		color: #fff;
		background: gray;
		pointer-events: none;
	}
	.btnActive{
		background: #FB5A4A;
		pointer-events: all;
	}
</style>
